<template>
	<div class="uploadBtn" :style="{width,height}" @click="callAppuploadFile">
		<!-- <input type="file" :accept="accept"  @change='changeFn($event)' :disabled='disabled'/> -->
		<div class="imgbox" v-if="fileUrl" :style="{'z-index':showClose?20:1}">
			<i class="clear" @click.stop="clear" v-if="!disabled && showClose"></i>
			<Image v-if="getFileType(fileUrl)=='img'" :url='fileUrl'/>
			<my-video-play v-else-if="getFileType(fileUrl)=='video'" :id="`videoWrap`" :src='fileUrl' ref="player"/>
			<my-audio v-else-if="getFileType(fileUrl)=='audio'" :arrSrc="[fileUrl]"/>
		</div>
		<i v-else class="add"></i>
	</div>
</template>

<script>
	import { reactive,toRefs,onMounted } from 'vue'
	import {useStore} from 'vuex'
	import { toast, H5CallAPPFuction} from '@/utils/common'
	import Image from './image.vue'
	import myVideoPlay from "@/components/myVideoPlay.vue";
	import myAudio from "@/components/myAudio.vue";
	export default {
		components:{
			Image,
			myVideoPlay,
			myAudio
		},
		props:{
			modelValue:String,
			text:String,
			width:String,
	 		height:String,
			accept:String,
			disabled:{
				type: Boolean,
				default(){
				    return false  // 默认
				}
			},
			isUploadServer:{// 是否立即上传服务器
				type:Boolean,
				default(){
				    return true  // 默认
				}
			},
			type:String,  // 文件类型，图片、视频、音频等
			showClose:{
				type:Boolean,
				default:true
			}
		},
		setup(props,context){
			const store = useStore()
			const state = reactive({
				fileUrl:'',
				fileObject:'',
			})

			onMounted(()=>{
				// 定义chooseFileRes方法，供app调用(接收app文件上传后的地址)
				window['chooseFileRes'] =  (objStr)=> { // objStr:{url:''}
					const obj = JSON.parse(objStr) || '{}'
					if(obj.url==""){
						return toast('Uploading File Failed. Url Is Null') // 没有处理结果
					}
					state.fileUrl = obj.url
					context.emit('update:modelValue',obj.url) 
					context.emit('success',obj.url)  // 触发上传成功事情
				}

				if(props.modelValue){
					state.fileUrl = props.modelValue
				}
			})

			const callAppuploadFile = ()=>{
				if(props.disabled){
					return
				}
				console.log('开始调用app上传....')
				let ftype = '3' // 非以下三种文件
				if(props.type == 'img'){
					ftype = '1'
				}else if(props.type == 'video'){
					ftype = '2'
				}else if(props.type == 'audio'){
					ftype = '4'
				} 
				// 调用app方法文件上传，H5使用chooseFileRes接收返回值
				//  context.emit('update:modelValue',"https://collext.tst.metayuanjie.com/files/2022-12-08/517fd53bef2a4210b7697e03bac840b8.mp4")
				//  state.fileUrl = "https://collext.tst.metayuanjie.com/files/2022-12-08/517fd53bef2a4210b7697e03bac840b8.mp4"
				//  console.log('0000000000000')
				try {
                    H5CallAPPFuction('chooseFile',ftype)   
                } catch (error) {
                    toast('调用app上传失败')
					// setTimeout(()=>{
					// 	chooseFileRes({"url" : "http:\/\/collext.tst.metayuanjie.com\/files\/2022-08-30\/ac4ea6cd7ee344a5a2a2709e8b5a79bf.png"})
					// 	//chooseFileRes('{"url":"https://www.tst.metayuanjie.com/files/2022-08-11/336f07a4cb304c5a91b8878ff436cf36.jpg"}')
					// },3000)
                } 
			}
			const getFileType=(fileUrl)=>{
				const filename = fileUrl.toLowerCase()
				if((/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(filename))){
					return 'img'
				}else if((/\.(mp4|avi|wmv|mpeg)$/.test(filename))){
					return 'video'
				}else if((/\.(mp3|aac|wav|wma|cda|flac|m4a|mid|mka|mp2|mpa|mpc|ape|ofr|ogg|ra|wv|tta|ac3|dts)$/.test(filename))){
					return 'audio'
				}else{
					return ''
				}
			}
			const clear = ()=>{
				state.fileUrl = ''
				context.emit('update:modelValue','') 
			}
		
			return {
				...toRefs(state),
				callAppuploadFile,
				getFileType,
				clear
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uploadBtn {
		display: block;
		height: 100%;
		width: 100%;
		border: 0;
		position: relative;
		z-index: 10;
		overflow: hidden;
		text-align: center;
		 border:1px solid #67F8FF;
		background: rgba(103,248,255,0.3);
		//   background-image: url(/images/upadd.png);
		//   background-position: center;
		//   background-repeat: no-repeat;
		// background: url(/images/adRelease/vdbg.png) no-repeat left top/100% 100%, url(/images/upadd.png) no-repeat center center/50px 50px;
        //background-size: 100% 100%;
		font-size: 26px;
		overflow: hidden;
		     .add{
                    background-image: url(/images/upadd.png);
                    background-position: center;
                    background-repeat: no-repeat;
                    height:30px;
                    width:30px;
                    background-size:100% 100%;
                    position: absolute;
                    top:50%;
                    left:50%;
                    margin-top:-15px;
                    margin-left:-15px;
					z-index:10;
                }
		input{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 15;
			left: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
			&:disabled{
				cursor: not-allowed;
			}
		}
		.imgbox{
			position: absolute;
			z-index: 20;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			.clear{
				position: absolute;
				z-index: 30;
				top: 7px;
				right: 12px;
				color: #67F8FF;
				font-size: 40px;
				 background-image: url(/images/del-upload.png);
				background-position: center;
				background-repeat: no-repeat;
				height:30px;
                    width:30px;
                    background-size:100% 100%;
			}
		}
	}
</style>
